<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>公告管理</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/static/css/style1.css" />
    <link rel="icon" href="${pageContext.request.contextPath}/static/img/favicon.ico"  type="image/x-icon" />
    <link href="/static/js/laypage/skin/laypage.css" />
    <link href="${pageContext.request.contextPath}/static/js/laypage/skin/laypage.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/laypage.js"></script>
    <script type="text/javascript" src="/static/js/laypage.js"></script>
    <link rel="stylesheet" type="text/css"
          href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/bootbox.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .page {
            font-family: Arial, "楷体";
            font-size: 15px;
            line-height: 26px;
            color: #000000;
            height: 40px;
            margin-top: -15px;
            background-color: #EEF6FF;
            margin-right: 0;
        }


        .page td {
            padding-right: 10px;
            padding-left: 10px;
        }

        .page select {
            font-family: Arial, "楷体";
            font-size: 12px;
            color: #000000;
            line-height: 18px;
            border: 1.5px solid #5084BB;
        }
    </style>
</head>
<body>

<div class="box">
    <!-- 		<div class="title">后台管理公告信息表</div> -->
    <div class="content">
        <!--搜索输入框及查询、重置按钮-->
        <form action="/notice/queryByTitle.do" method="post">
        <div class="container content_width">
            <div class="person_search">
                <div class="search_input">
                    <div class="input-group mb-3">
                        <span>根据关键字查询：</span> <input id="title" type="text" name="title"
                                                 class="form-control" placeholder="请输入关键字" value="">
                    </div>
                </div>

                <div class="search_input">

                    <button class="btn btn-primary search_btn" type="submit"
                            id="search_btn" >查询</button>

                    <button class="btn btn-primary search_btn" type="button"
                            id="back_btn">重置</button>
                </div>
            </div>
            <div class="line"></div>
        </div>
        </form>
        <!--添加按钮及bootstrap的模态框-->
        <div class="export">
            <button id="new_add" type="button" class="btn btn-primary btn-sm"
                    data-toggle="modal" data-target="#renyuan">
                <img src="/static/image/add_two.png" /> <span>添加</span>
            </button>
            <div class="modal fade" id="renyuan">
                <div class="modal-dialog modal-lg modal_position">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">添加</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <form id="form1" name="form1" action="/notice/add.do" >
                            <div class="modal-body">
                                <table id="xztb" class="table" >
                                    <!--新修改弹窗的样式-->
                                    <tbody>
                                    <tr>
                                        <td class="tb_bg"><label ><font
                                                style="font-size: 14px; color: red;">*</font>公告标题</label></td>
                                        <td><input class="notice_title" type="text"
                                                   name="notice_title"  placeholder="请输入公告标题" /></td>

                                    </tr>
                                    <tr>
                                        <td class="tb_bg"><label ><font
                                                style="font-size: 14px; color: red;">*</font>公告内容</label></td>
                                        <td><textarea class="notice_content" name="notice_content"   cols="80"   rows="5"   style="OVERFLOW:   hidden" placeholder="请输入公告内容"></textarea></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                            data-dismiss="modal">取消</button>
                                    <button id="adbtn" type="submit" class="btn btn-secondary" >确定</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--表格列表-->
        <table id="tb" class="table">
            <thead>
            <tr>
                <td>id编号</td>
                <td>公告标题</td>
                <td>公告内容</td>
                <td>发布时间</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="show_tbody">
            <c:forEach items="${notices}" var="n">
                <tr>
                    <td >${n.notice_id}</td>
                    <td>${n.notice_title}</td>
                    <td><a data-toggle="modal" data-target="#myModal" onclick="NoticeDetail('${n.notice_content}')">点击查看公告内容</a></td>

                    <td>${n.notice_date}<input type="hidden" id="notice_content1"></td>
                    <td><div class="edit2">
                        <span id ="edit1" class="edit1" data-toggle="modal" data-target="#renyuan1" style="color:#479eff;cursor: pointer;" onclick="doNoticeModify(${n.notice_id})">编辑</span>
                        <div class="modal fade" id="renyuan1">
                            <div class="modal-dialog modal-lg modal_position">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">编辑</h4>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <form id="form2" name="form2" action="/notice/modify.do" >
                                        <div class="modal-body">
                                            <table id="xztb" class="table" >
                                                <tbody>
                                                <tr>
                                                    <td class="tb_bg"><label for=""><font
                                                            style="font-size: 14px; color: red;">*</font>公告 ID：</label></td>
                                                    <td><input class="notice_id" type="text"
                                                               name="notice_id" id="notice_id" value="${notice_id }" readonly/></td>
                                                </tr>
                                                <tr>
                                                    <td class="tb_bg"><label for=""><font
                                                            style="font-size: 14px; color: red;">*</font>公告标题：</label></td>
                                                    <td><input class="notice_title" type="text"
                                                               name="notice_title" id="notice_title" value="${notice_title }"/></td>
                                                </tr>
                                                <tr>
                                                    <td class="tb_bg"><label for=""><font
                                                            style="font-size: 14px; color: red;">*</font>公告内容</label></td>
                                                    <td><textarea class="notice_content" id="notice_content" name="notice_content" cols="80"   rows="5"    style="OVERFLOW:   hidden">${notice.notice_content}</textarea></td>
                                                </tr>
                                                <tr>
                                                    <td class="tb_bg"><label for=""><font
                                                            style="font-size: 14px; color: red;">*</font>发布时间</label></td>
                                                    <td><input type="text" name="notice_date" id="notice_date" value="${notice_date}" readonly/></td>
                                                </tr>

                                                </tbody>
                                            </table>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal" style="background: white">取消</button>
                                                <button id="ad_btn" type="submit" class="btn btn-secondary" >确定</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div><a href="../delete.do?id=${n.notice_id}">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <div class="container">

            <!-- 公告信息模态框 -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">

                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">公告内容</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <!-- 模态框主体 -->
                        <div class="modal-body">
                            <textarea class="notice_content"  name="notice_content" cols="60"   rows="8"    style="OVERFLOW:   hidden" readonly></textarea>
                        </div>

                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <table width="100%" border="0" align="center" cellpadding="0"
               cellspacing="0" class="page">
            <tr>
                <td width="50%" align="left">共有&nbsp;${counttotal }&nbsp;条记录，<span
                        style="font-family: 楷体; font-size: 15px; color: black">第</span><span
                        style="font-family: 楷体; font-size: 15px; color: black">
						${pagecurrent }/${pages } </span><span
                        style="font-family: 楷体; font-size: 15px; color: black;">页</span></td>
                <td width="50%" align="right"><a href="/notice/queryAll.do/1">首页</a>
                    <a href="/notice/queryAll.do/${pagecurrent-1<=1?1:pagecurrent-1}">上一页</a>
                    <a
                            href="/notice/queryAll.do/${pagecurrent+1>=pages?pages:pagecurrent+1}">下一页</a>
                    <a href="/notice/queryAll.do/${pages}">末页&nbsp;</a>&nbsp;跳转到 <select
                            name="select2" onchange="changePage(this)">
                        <c:forEach begin="1" end="${pages }" step="1" var="i">
                            <option value="${i}" ${i==pagecurrent?"selected":"" }>${i
                                    }</option>
                        </c:forEach>
                    </select></td>
            </tr>
        </table>

        <script>
            $(function () {
                //绑定模态框展示的方法
                window.NoticeDetail = function (notice_content) {
                    $("#notice_content1").val(notice_content);
                    $('#myModal').modal('show');
                }
                $('#myModal').on('show.bs.modal', function (event) {
                    var notice_content = $("#notice_content1").val();
                    var modal = $(this);  //get modal itself
                    modal.find('.notice_content').val(notice_content);
                });
            })
                
            function changePage(th) {
                window.location="/notice/queryAll.do/"+th.value;
            }
            function doNoticeModify(notice_id) {
                var data={
                    "notice_id":notice_id

                }
                $.ajax({
                    url:"/notice/query1.do",
                    type : "post",
                    data: JSON.stringify(data),
                    success:function (notice) {
                        $("#notice_id").val(notice.notice_id);
                        $("#notice_title").val(notice.notice_title);
                        $("#notice_content").val(notice.notice_content);
                        $("#notice_date").val(notice.notice_date);
                    },
                    dataType: "json",
                    contentType: "application/json"
                })
            }

        </script>
    </div>
</div>

<script src="/static/js/mejs1.js"></script>
</body>
</html>
